<template>
  <!-- 重要节点 -->
  <!-- 表单 -->
  <div>
    <title-name title="重要节点完成情况统计"></title-name>
    <s-table
      bordered
      ref="table"
      :page-keys="['pageNum', 'pageSize']"
      tableLayout="fixed"
      size="default"
      rowKey="code"
      :columns="nodeStatisticsColumns"
      :data="loadData"
      :alert="true"
      show-size-changer
      show-quick-jumper
      :showPagination="false"
    >
      <template v-for="col in ['completeTime']" :slot="col" slot-scope="text, record">
        <div :key="col">
          <a-date-picker v-model="record[col]" :disabled="editModel == 0 || record.situation == '未开始'" @change="updateSituation(record)" placeholder="请选择" value-format="YYYY-MM-DD" />
        </div>
      </template>
    </s-table>

    <div>注：此处的重要节点只取竣工验收和工程类的一级节点与二级节点</div>
    <!-- 页脚操作栏 -->
    <div class="btn_box tool-btns--fixed" style="bottom: 50px" v-if="editModel != 0">
      <a-button class="button_right" type="primary" @click="() => $emit('previousStep')">上一步</a-button>
      <a-button type="primary" @click="() => $emit('nextStep')">下一步</a-button>
    </div>
  </div>
</template>

<script>
import { api } from '@/api/project/performanceAnalysis'
import BaseEditPage from '@/views/baseEditPage' // 编辑详情页基础配置
import BSelect from '@/components/BComponents/BSelect'

import { nodeStatisticsColumns, colspan, colspanProjectName } from '../model.js'

export default {
  name: 'nodeCompletion',
  extends: new BaseEditPage(),
  components: {
    BSelect
  },

  data() {
    this.nodeStatisticsColumns = nodeStatisticsColumns

    return {
      loading: false, // 加载控件
      editModel: 1, // 操作状态:0 查看;1 编辑
      nodesituation: { nodesituationDTOList: [] },
      loadData: () => {
        return new Promise((resolve, reject) => {
          resolve({
            data: this.nodesituation.nodesituationDTOList || []
          })
        })
      }
    }
  },
  props: {
    isAudit: {
      // 是否作为审批详情
      type: Boolean,
      default: false
    },
    form: {
      type: Object,
      default: {}
    }
  },
  watch: {
    isAudit: {
      immediate: true,
      handler(val) {
        if (val) {
          this.$nextTick(() => {
            this.editModel = 0
          })
        }
      }
    }
  },
  computed: {},
  mounted() {
    this.nodesituation = this.form
    this.initColumns()
    this.$refs.table.refresh(true)
  },

  methods: {
    updateSituation(record) {
      const days = Math.floor((new Date(record.completeTime) - new Date(record.palnTime)) / 1000 / 60 / 60 / 24)
      if (days > 0) {
        record.situation = `逾期完成(逾期${days}天)`
      } else if (days < 0) {
        record.situation = `提前完成(提前${Math.abs(days)}天)`
      } else {
        record.situation = `按期完成(提前${days}天)`
      }
    },
    initColumns() {
      this.nodeStatisticsColumns[1].customRender = (text, row, index) => {
        return colspan(text, row, index, this.nodesituation.nodesituationDTOList, 'projectName')
      }
      this.nodeStatisticsColumns[2].customRender = (text, row, index) => {
        //根据项目合并
        return colspanProjectName(text, row, index, this.nodesituation.nodesituationDTOList, 'projectName')
      }
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .form-item  {
  .ant-input:not([disabled]),
  .ant-select:not(.ant-select-disabled) .ant-select-selection,
  .ant-calendar-picker-input,
  .ant-input-number:not([disabled]),
  .ant-cascader-picker {
    border-color: #e4ac0b;

    background-color: #fff9e8;
  }
  .ant-input-disabled,
  .ant-input-number-disabled .ant-input-number-input,
  .ant-time-picker-input[disabled] {
    border-color: #d9d9d9 !important;
    background-color: #f5f5f5 !important;
  }

  .remark {
    .ant-input {
      border-color: inherit;
      background-color: initial;
    }
  }
}
</style>